import { useState } from "react";
import { AdvancedButton, AdvancedButtonProps } from "../AdvancedButton/AdvancedButton";
import { ActionMenuADvanced } from "./ActionMenuList"
import clsx from "clsx";

type AdvancedButtonSelectProps = AdvancedButtonProps & {
  customvalue: unknown
}

interface SelectActionMenuProps {
  children: React.ReactNode,
  actions: AdvancedButtonSelectProps[],
  resetValue: unknown,
  defaultValue: unknown,
  getValue(value: unknown): void,
}

export const SelectActionMenu = ({ children, actions, resetValue, defaultValue, getValue }: SelectActionMenuProps) => {
  const [value, setValue] = useState<unknown>(defaultValue)

  const onToggleValue = (set: unknown) => {
    let changeValue = set === value ? resetValue : set;
    setValue(changeValue)
    getValue(changeValue)
  }

  const content = actions.map((item, idx) => (
    <AdvancedButton
      key={'icon' + idx}
      icon={item.icon}
      iconColor={item.color}
      onClick={() => onToggleValue(item.customvalue)}
      {...item}
      className={clsx('w-full flex justify-start', item.customvalue === value ? `text-[--btn-color-active] hover:text-[--btn-color-active]` : '')} >
      {item.children}
    </AdvancedButton>
  ))

  return <ActionMenuADvanced>
    <ActionMenuADvanced.Button>{children}</ActionMenuADvanced.Button>
    <ActionMenuADvanced.Content>{content}</ActionMenuADvanced.Content>
  </ActionMenuADvanced>
}
